<template>
<div>
     <fou-dialog :title="'入倉'" v-model:dialogValue="dialogValue" :width="'75%'">
      <template #content="">
    <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
      <el-row :gutter="24">
        <!-- <el-col :span="24">
          <el-form-item label="日期" prop="create_time">
             <el-date-picker
                v-model="form.create_time"
                type="date"
                placeholder="請選擇日期"
                size="default"
                format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              />
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="供應商" prop="supplier_id" >
              <el-button  @click="addSupplier" type="primary" circle icon="Search"></el-button>
              <div class="ml-[20px]">名稱：{{form.supplier.name}}</div>
              <div class="ml-[20px]">聯絡人：{{form.supplier.contact}}</div>
              <div class="ml-[20px]">電話：{{form.supplier.mobile}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="備註" prop="remark">
             <el-input type="textarea" v-model="form.remark"   ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="產品" prop="product" >
              <el-button @click="addProduct"  type="primary" circle icon="Search"></el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="">
            <div style="width:100%">
              <!-- <schoolTable :list="form.data"
              @del_school="(v)=>{delschool(v)}"
              @addProduct="(v)=>{addproduct(v)}"
              ></schoolTable> -->
              <product :list="form.product"></product>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

           <div class="flex justify-end mt-10 w-[100%]" >
            <el-button @click="dialogValue = false">取消</el-button>
            <el-button type="primary" @click="confirm(ruleFormRef)" color="#081F42">確定</el-button>
           </div>
      </template>
     </fou-dialog>
     <supplierDio ref="SupplierRef" @update="getSupplier"></supplierDio>
    <product-dialog ref="productRef" @update="getProduct"></product-dialog>
</div>
</template>

<script setup>
import { ref ,reactive,watch,onMounted} from 'vue' 
import { dayjs } from "element-plus";
import {updateWarehousing} from '@/http/index.js'
import {message} from '@/common/function.js'
import {elProps,status_options} from '../index'
import { add, subtract, } from 'high-precision-four-fundamental-rules'
import supplierDio from '../dialog/supplier.vue'
import product from './product.vue'
import productDialog from '../dialog/product.vue'

// 添加供應商
const SupplierRef = ref('')
const addSupplier = async()=>{
  await SupplierRef.value.TableData()
  SupplierRef.value.SupplierDia = true
}

const getSupplier =(row)=>{
console.log(row);
form.supplier_id = row.id
form.supplier = row
}

const dialogValue = ref(false)
const rules = reactive({
  supplier_id: [{ required: true, message: "請選擇供應商", trigger: ["blur",'change'] }],
}); 
const form = reactive({
    // create_time:'',
    supplier_id:'',
    supplier:{},
    remark:'',
    product:[],
    data:[]
});

const props = defineProps({
  echo:Object,
})
Object.assign(form,props.echo)
watch(()=>props.echo,(neaval)=>{
  console.log(neaval);
  Object.assign(form,neaval)
})
const productRef = ref('')
const addProduct = ()=>{
productRef.value.TableData()
productRef.value.TableDatatype()
productRef.value.productDia = true
} 
const getProduct = (val)=>{
  console.log(val);
  val.map(e=>e.num = 1)
  form.product = val
}
const ruleFormRef = ref('')
const emit = defineEmits(['update'])
const confirm = async (formEl,type) => {
  if (!formEl) return;
    formEl.validate(async (e)=>{
      if (e) {
        // form.product.map(e=>{
        //   e.product_id = e.product_id
        // })
        let obj = [
          {school_id:form.school_id,product:JSON.stringify(form.product)}
        ]
        form.data = obj
        console.log(form);
          if (form.product.length ===0) {
           return message('每個選擇學校至少添加一個產品','warning')
          }
            const data = await updateWarehousing(form)
            if (data.code == 200) {
              message('入倉數據修改成功')
              emit('update')
            }
        dialogValue.value = false
      }
    })
};

defineExpose({
    dialogValue,
})

</script>

<style lang='less'  scoped>
.el-col{
  padding: 0 !important;
}
.product{
  .el-button{
    color: #fff;
  }
}
</style>

